<template>
	<view @touchstart="touchStart" @touchend="touchEnd">
		<view class="top1">
		</view>
		<div class="content1">
			<image class="avatar" src="/static/xy.png"></image>
			<text class="nickname">翱翔的雄鹰</text>
			<navigator url="/pages/my/jx/jx">
			<image class="liwu" src="/static/liwu.png"></image>
			</navigator>
			<text class="qiandao">签到立领</text>
			
		</div>
		<div class="hr"></div>
		<div class="content2">
			<div class="it1">
				<navigator url="/pages/my/xh/xh">
					<image class="img1" src="/static/heart.png"></image>
					<text class="xihuan">我的喜欢</text>
				</navigator>
			</div>
			<div class="it2">
				<navigator url="/pages/my/xx/xx">
					<image class="img1" src="/static/message.png"></image>
					<text class="xinxi">信息修改</text>
				</navigator>
			</div>
			<div class="it3">
				<navigator url="/pages/my/sz/sz">
					<image class="gear" src="/static/shezhi.png"></image>
					<text class="shezhi">设置</text>
				</navigator>
			</div>
		</div>
		<div class="it4">
			<navigator class="it4" url="/pages/my/dh/dh">
				<image class="phone" src="/static/phone.png"></image>
				<text class="dianhua">电话帮助</text>
			</navigator>
			<div class="yh" @touchend="touchEnd">
				<p class="p1"></p>
				<p class="p2"></p>
			</div>
		</div>
		
		<view style="background-color: #F95738;width: 100%;
		  height: 120rpx;
		  position:fixed;
		  bottom: 0;
		  display:flex;
		  flex-direction:row;
		  justify-content:flex-start;">
		   <view @click="gotohome" id="button1">
		   <image src="/static/home.png" style="width: 60rpx;height: 60rpx;margin-left: 50rpx;margin-top: 10rpx;"></image>
		   <view style="margin-left: 47rpx;font-weight: 900;">首页</view>
		   </view>
		   <view @click="gotozf" id="button2">
		   <image src="/static/zf.png" style="width: 60rpx;height: 60rpx;margin-left: 230rpx;margin-top: 10rpx;"></image>
		   <view style="margin-left: 190rpx;font-weight: 900;">一键转发</view>
		   </view>
		   <view @click="gotomy" id="button3">
		   <image src="/static/me.png" style="width: 60rpx;height: 60rpx;margin-left: 170rpx;margin-top: 10rpx;"></image>
		   <view style="margin-left:170rpx;font-weight: 900;">我的</view>
		   </view>
		  </view>

	</view>	
</template>

<script>
 export default {  
        data() {  
            return {  
                touchStartX: 0,  // 触屏起始点x  
                touchStartY: 0,  // 触屏起始点y  
            };  
        },  
        methods: {
			gotohome(){
				uni.navigateTo({
					url:"/pages/index/index"
				})
			},
			gotozf(){
				uni.navigateTo({
					url:"/pages/zf/zf"
				})
			},
			gotomy(){
				uni.navigateTo({
					url:"/pages/my/my"
				})
			},
			
			addurl(){
				console.log("123")
				uni.navigateTo({
					url: "/pages/my/jx/jx"
				})
			},
            /**  
            * 触摸开始  
            **/  
            touchStart(e) {  
                console.log("触摸开始")  
                this.touchStartX = e.touches[0].clientX;  
                this.touchStartY = e.touches[0].clientY;  
            },  

            /**  
            * 触摸结束  
            **/  
            touchEnd(e) {  
                console.log("触摸结束")  
                let deltaX = e.changedTouches[0].clientX - this.touchStartX;  
                let deltaY = e.changedTouches[0].clientY - this.touchStartY;  
                if (Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {  
                    if (deltaX >= 0) {  
						uni.navigateTo({
							url:"/pages/my/jx/sf/fl/rw/rw"
						})
					}
				}
			}
		},
	}
</script>

<style>
	.top1{
		width: 100%;
		height: 130rpx;
		background-color: #F95738;	
		display:flex;
		flex-direction:row;
		justify-content:flex-start;
	}
	.content1{
		display: flex;
		flex-direction: row;
	}
	.avatar{
		    width: 230rpx;
		    height: 230rpx;
		    border-radius: 100%;
			background-color: #C4C4C4;
			margin-top: 40rpx;
			margin-left:20rpx;
	}
	.nickname{
			display: inline-block;
			font-size: 50rpx;
			margin-left: 30rpx;
			margin-top: 70rpx;
			font-weight: bold;
	}
	.liwu{
		width: 100rpx;
		height: 100rpx;
		margin-right: -100rpx;
		margin-top: 145rpx;
	}
	.qiandao{
		font-weight: bold;
		font-size: 30rpx;
		font-family: 'OPPOSans';
		margin-left: -10rpx;
		margin-top: 245rpx;
	}
	.hr{
		width: 70%; 
		margin: auto; 
		border-bottom: 1px solid rgba(166,166,166,1);
		margin-left: 80rpx;
	}
	.content2{
		display: flex;
		flex-direction: row;
	}
	.img1{
		width: 190rpx;
		height: 190rpx;
		margin-top: 50rpx;
		margin-left: 30rpx;
	}
	.gear{
		width: 200rpx;
		height: 200rpx;
		margin-right: 50rpx;
		margin-top: 38rpx;
	}
	.phone{
		width: 190rpx;
		height: 190rpx;
		margin-top: 100rpx;
		margin-left: 50rpx;
	}
	.xihuan{
		font-size: 40rpx;
		font-weight: bold;
		margin-left: 48rpx;
	}
	.xinxi{
		font-size: 40rpx;
		font-weight: bold;
		margin-left: 45rpx;
		
	}
	.shezhi{
		font-size: 40rpx;
		font-weight: bold;
		margin-left: 60rpx;
		margin-bottom: 30rpx;
	}
	.dianhua{
		font-size: 40rpx;
		font-weight: bold;
		margin-top: 15rpx;
		margin-left: 65rpx;
	}
	.it4{
		display: flex;
		flex-direction: column;
		position: relative;
		position: absolute;
	}
	.yh{
		display: flex;
		flex-direction: column;
		position: relative;
	}
/* 	.circle{

		width: 400rpx;
		height: 500rpx;
		margin-top: 10rpx;
		margin-left: -260rpx;
	}
	.wz{
		position: absolute;
		writing-mode: vertical-lr;
		writing-mode: sideways-lr;
		margin-top: 100rpx;
		font-size: 65rpx;
	} */
	
	.p2:before { 
	    position: absolute; 
	    margin-top: 400rpx;
	    margin-left: 5rpx;
	    z-index: 1;
        height: 0;
        padding-right: 100rpx;
		writing-mode: vertical-lr;
		font-size: 35rpx;
        font-weight: bold;
	    line-height: -10;
	    color: #000;
	    border: 15px solid #ee7600;
        border-right-color: transparent; /*右边框透明，变成空缺的角*/	                content: '右滑有惊喜';
	    box-shadow: 0 5rpx 5rpx -5rpx #000;
	}
	.p2:after { /*书签的夹角*/
	    position: absolute;
	    top: 80px;
	    left: 20px;
	    border: 4px solid #89540c;
	    border-left-color: transparent;
	    border-bottom-color: transparent;
	}
</style>
